<template>
  <c-dialog ref="dialog" :title="title" route-switch width="70vw" append-to-body @open="openHandle" @close="closeHandle">
    <div v-if="isOpen" class="body-content">
      <c-permission-tabs :refresh="false">
        <el-tab-pane label="待选图纸" name="noSelection">
          <c-table-box checkbox :other-filters="otherFilters" :other-raw="paramsRaw" :table-config="tableConfig" @selection-change="selectionChange" />
        </el-tab-pane>
        <el-tab-pane :label="`已选图纸(${selections.length})`" name="selection">
          <c-table-box :data="selections" no-data-auto-height no-request hide-func :table-config="tableConfig" />
        </el-tab-pane>
      </c-permission-tabs>
      <div class="btn-container">
        <c-button @click="cancelHandle">取消</c-button>
        <c-button type="primary" @click="confirmHandle">确认</c-button>
      </div>
    </div>
  </c-dialog>
</template>
<script>
import { deepClone } from '@/utils'
export default {
  name: 'RelevanceDrawing',
  props: {
    title: {
      type: String,
      default: '关联图纸'
    },
    otherFilters: {
      type: Array,
      default: () => []
    },
    paramsRaw: {
      type: Object,
      default: () => ({})
    },
    interfacePath: {
      type: String,
      default: '/slm-admin/api/v1/shopDesignPicture/page'
    }
  },
  data() {
    return {
      isOpen: true,
      selections: [],
      tableConfig: {
        interfacePath: this.interfacePath,
        setting: [
          {
            prop: 'picTaskName',
            label: '图纸名称',
            minWidth: 100,
            className: 'btn-green',
            isButton: true,
            clickFun: this.toDetail
          },
          {
            prop: 'picTaskCode',
            label: '图纸编码',
            minWidth: 160
          },
          {
            prop: 'picType',
            label: '图纸类型',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'PIC_TYPE'
            }
          },
          {
            prop: 'designRange',
            label: '设计范围',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'DECORATION_RANGE'
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'DECORATION_FORM'
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: 120,
            render: (h, row) => {
              return h('c-design-area', { props: { value: row.designSpace }})
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            minWidth: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'BIZ_TYPE'
            }
          },
          {
            prop: 'picTotalArea',
            label: '设计总面积',
            minWidth: 100
          },
          {
            prop: 'haveEAndC',
            label: '是否含成融定',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'eandCArea',
            label: '成融定面积',
            minWidth: 100
          },
          {
            prop: 'softwareSumArea',
            label: '软体区总面积',
            minWidth: '120'
          },
          {
            prop: 'suiteSumArea',
            label: '套房区总面积',
            minWidth: '120'
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务总面积',
            minWidth: 120
          },
          {
            prop: 'expectEndTime',
            label: '预计设计完成时间',
            minWidth: 120,
            formatData: this.$parseTimeYMD('expectEndTime')
          },
          {
            prop: 'designUnitName',
            label: '设计单位',
            minWidth: 100
          },
          {
            prop: 'designerName',
            label: '设计师',
            minWidth: 100
          },
          {
            prop: 'schedule',
            label: '图纸进度',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'PIC_DESIGN_SCHEDULE'
            }
          },
          {
            prop: 'state',
            label: '图纸状态',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'PIC_DESIGN_STATE'
            }
          }
        ]
      }
    }
  },
  watch: {
  },
  methods: {
    selectionChange(selection) {
      this.selections = selection
    },
    cancelHandle() {
      this.selections = []
      this.$refs.dialog.visible = false
    },
    confirmHandle() {
      this.$refs.dialog.visible = false
      this.$emit('confirm', deepClone(this.selections))
      this.selections = []
    },
    closeHandle() {
      this.isOpen = false
    },
    openHandle() {
      this.isOpen = true
    },
    toDetail(row) {
      this.$router.push({ name: 'ShopDrawingDetail', query: { id: row.id }})
    }
  }
}
</script>
